<template>
	<el-dialog :visible.sync="options.showDialog" width="600px" class="details">
		<h3 class="details-title">{{options.title}}</h3>
		<ul class="details-content clearfix">
			<li class="details-item" v-for="(item,index) in options.list" :key="index" v-if="options.list.length != 0">
				<h3>{{item.createTime}}</h3>
				<p v-html="item.comment"></p>
			</li>
			<li class="details-item" style="margin: 20px auto 0;" v-if="options.list.length == 0">
				<p style="text-align: center;">暂无数据！</p>
			</li>
		</ul>
		
		<!-- 分页器 -->
		<div class="pageBox">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="pageChange"
				:current-page="cur"
				:page-sizes="[10, 20, 30, 50, 100]"
				:page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="options.totalNum"
				background
			></el-pagination>
		</div>
	</el-dialog>
</template>

<script>
export default{
	props:{
		options:{
			require: true,
			type: Object
		}
	},
	data(){
		return {
			/* 分页功能数据 */
			cur:1,
			pageSize: 10,
		}
	},
	methods:{
		handleSizeChange(p){
			console.log(p);
			this.pageSize = p;
			this.$emit('getDetailsList',{cur: this.cur,pageSize: this.pageSize});
		},
		pageChange(val){
			console.log(val);
			this.cur = val;
			this.$emit('getDetailsList',{cur: this.cur,pageSize: this.pageSize});
		},
	},
	watch:{
		'options.showDialog'(){
			if(this.options.showDialog){
				this.cur = 1;
				this.pageSize = 10;
			}
		}
	}
}
</script>

<style scoped="scoped">
.details{overflow: hidden;}
.details .details-title{height: 60px;line-height: 60px;text-align: center;font-size: 16px;border-bottom: 1px solid #D2D2D2;}
.details-content{margin: 20px auto;width: 560px;padding-bottom: 20px;max-height: 400px;overflow-y: scroll;}
.details-item{width: 500px;margin: 0 auto 20px;}
.details-item h3{text-align: center;line-height: 30px;margin-bottom: 5px;color: #9D9D9D;}
.details-item p{background-color: #F7F7F7;width: 100%;padding: 10px;border-radius: 6px;line-height: 30px;}
.pageBox{margin-top: 30px;padding-bottom: 20px;}
</style>
